﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    <title>In Touch Reminder - Contacts</title>

    <!-- stylesheets -->
    <link href="css/font.css" rel="stylesheet" type="text/css" />
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <!-- end stylesheets -->

    <!-- general -->
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script src="cordova.js" type="text/javascript" charset="utf-8"></script>
    <!-- end general -->

    <!-- application files -->
    <script type="text/javascript" src="js/app/globals.js"></script>
    <script type="text/javascript" src="js/app/dataServiceLocal.js"></script>
    <script type="text/javascript" src="js/app/deviceService.js"></script>
    <script type="text/javascript" src="js/app/phoneContactService.js"></script>
    <script type="text/javascript" src="js/app/contacts.js"></script>
    <!-- end application files -->

    <!-- common/extras js -->
    <script type="text/javascript" src="js/custom.js"></script>
    <script type="text/javascript" src="js/plugins/extras/jquery-ias.js"></script> 
    <!-- end common custom js -->

    <script type="text/javascript" charset="utf-8">
        ////////// Wait for Cordova to load
        //////////
        ////////document.addEventListener("deviceready", onDeviceReady, false);

        ////////// Cordova is ready
        //////////
        ////////function onDeviceReady() {
        //////    Page_Contact.fn_init();
      
        ////////}



    </script>
   
    <script type="text/javascript">
        $(document).ready(function () {

            // Wait for Cordova to load
            //
            document.addEventListener("deviceready", onDeviceReady, false);

            // Cordova is ready
            //
            function onDeviceReady() {

            //Start with the first pull - add to the bottom of list
                AddBottom_LiveFunc(false);

            }

            //*************************************************************//
            /* Function: AddBottom_LiveFunc 
            // Adds more entries if the last item is closed to being reached 
            //*************************************************************///
            function AddBottom_LiveFunc(addOneToPaging) {

                //show loading icon
                $('div#lastPostsLoader').html('<div id="overlay"><img src="images/elements/loaders/7.gif" class="loading_circle" alt="loading" ></div>');

                //read our options
                var currentItems_Count_InList = $("#contactList li").length;
                var additionalDataIsAvailable = true;


                //alert('total in list: ' + currentItems_Count_InList);

                //get the options object from local storage
                if (localStorage) {

                    var oQueryOpts = new Object();
                    if (!localStorage.queryOpts && currentItems_Count_InList==0 ) {

                        var totalRecords = Page_Contact.fn_getTotalContacts_fromLocalStorage();

                        //first time                        
                        oQueryOpts.currentLimit = 20;
                        oQueryOpts.currentOffset = 20;
                        oQueryOpts.currentPage = 1;
                        oQueryOpts.currentFilter = '';
                        oQueryOpts.currentSort = 'displayName';
                        oQueryOpts.currentSortDirection = '';
                        oQueryOpts.totalRecords = totalRecords;
                        //// -- end of the options //
                    }
                    else {

                        //if I have 17 in the list and I just received 20, we don't want to get any additional items
                        //update the scrolling
                       
                        //get the object from local storage
                        retrievedString = localStorage.getItem('queryOpts');
                        oQueryOpts = JSON.parse(retrievedString);

                        //if we want to see it....
                        //alert('retrieved Object: ', JSON.parse(oQueryOpts));

                        //do we already have the max data available for that item
                        if (currentItems_Count_InList < oQueryOpts.currentLimit && currentItems_Count_InList > 0){
                            additionalDataIsAvailable = false;
                            addOneToPaging=false;
                       }
                       else if (oQueryOpts.currentPage>1 &&  oQueryOpts.totalRecords < (oQueryOpts.currentPage * oQueryOpts.currentOffset)) {
                           additionalDataIsAvailable = false;
                           addOneToPaging = false;
                       }
                            
                        //should we page
                        if (addOneToPaging) {
                            //we may not need to, only firt time and if we pass the paging size....wow, this is getting messy
                            oQueryOpts.currentPage = oQueryOpts.currentPage + 1;
                            //alert('adding it to ' + oQueryOpts.currentPage)
                        }

                    }
                    //store it in local storage
                    localStorage.setItem('queryOpts', JSON.stringify(oQueryOpts));

                    //alert(oQueryOpts.currentPage + ' for here');
                }
                else {
                    //TODO:this device is not supported, we need local storage on the machine anyway!
                }

                if (additionalDataIsAvailable) {
                    //get the data or next data
                    var url = "contactDataHandler.html";
                    $.get(url, function (data) {
                        if (data != "") {
                            //alert('add data..');
                            //$(".items").append(data);
                            $("#contactList").append(data);
                        }
                        $('div#lastPostsLoader').empty();
                    });
                }
            }


            //*************************************************************//
            /* Function: AddTop_LiveFunc 
            // Adds more entries to the top if we are going back up
            //going upward - user reached the top
            //*************************************************************///           
            function AddTop_LiveFunc(subtractOneToPaging) {
                ////show loading icon
                //$('div#lastPostsLoader').html('<div id="overlay"><img src="images/elements/loaders/7.gif" class="loading_circle" alt="loading" ></div>');

                ////alert('I am up there');
                ////read our options
                //var currentItems_Count_InList = $("#contactList li").length;
                //var additionalDataIsAvailable = true;


                ////alert('total in list: ' + currentItems_Count_InList);

                ////get the options object from local storage
                //if (localStorage) {

                //    var oQueryOpts = new Object();
                //    if (!localStorage.queryOpts && currentItems_Count_InList==0 ) {

                //        var totalRecords = Page_Contact.fn_getTotalContacts_fromLocalStorage();

                //        //first time                        
                //        oQueryOpts.currentLimit = 20;
                //        oQueryOpts.currentOffset = 20;
                //        oQueryOpts.currentPage = 1;
                //        oQueryOpts.currentFilter = '';
                //        oQueryOpts.currentSort = 'displayName';
                //        oQueryOpts.currentSortDirection = '';
                //        oQueryOpts.totalRecords = totalRecords;
                //        //// -- end of the options //
                //    }
                //    else {

                //        //if I have 17 in the list and I just received 20, we don't want to get any additional items


                //        //update the scrolling
                       
                //        //get the object from local storage
                //        retrievedString = localStorage.getItem('queryOpts');
                //        oQueryOpts = JSON.parse(retrievedString);

                //        //if we want to see it....
                //        //alert('retrieved Object: ', JSON.parse(oQueryOpts));

                ////        //do we already have the max data available for that item
                ////        if (currentItems_Count_InList < oQueryOpts.currentLimit && currentItems_Count_InList>0)
                ////        {
                ////            additionalDataIsAvailable = false;
                ////            addOneToPaging=false;
                ////        }

                //        if (oQueryOpts.currentPage > 1) {
                //        //    oQueryOpts.currentPage = oQueryOpts.currentPage - 1;
                //        //    additionalDataIsAvailable = true;
                //        //}
                //        //else {
                //            oQueryOpts.currentPage = 1;
                //        }
                //        //////should we page
                //        ////if (subtractOneToPaging) {
                //        ////    //we may not need to, only firt time and if we pass the paging size....wow, this is getting messy
                //        ////    oQueryOpts.currentPage = oQueryOpts.currentPage - 1;
                //        ////    //alert('adding it to ' + oQueryOpts.currentPage)
                //        ////}

                //    }
                //    //store it in local storage
                //    localStorage.setItem('queryOpts', JSON.stringify(oQueryOpts));

                //    //alert(oQueryOpts.currentPage + ' for here');
                //}
                //else {
                //    //TODO:this device is not supported, we need local storage on the machine anyway!
                //}

                //if (additionalDataIsAvailable) {
                //    //get the data or next data
                //    var url = "contactDataHandler.html";
                //    $.get(url, function (data) {
                //        if (data != "" && currentItems_Count_InList < 1) {
                //            //alert('add data..');
                //            $("#contactList").append(data);
                //        }
                //    });
                //}
                ////hide the loader
                //$('div#lastPostsLoader').empty();


            };  //end AddTop_LiveFunc

     
        $(window).scroll(function () {
            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
            var scrolltrigger = 0.95;
            
            if ((wintop / (docheight - winheight)) > scrolltrigger) {

                //alert('width: ' + $(window).outerWidth());
                    //alert('height: ' + $(window).outerHeight());

                    
                    //$("#contactsContainer").fadeOut();

                    //$("#loadingContainer").css({
                    //    opacity: 0.5,
                    //    top: 0,
                    //    width: $("#tab-container").outerWidth(),
                    //    height: $("#tab-container").outerHeight()
                    //});

                    ////$("#img-load").css({
                    ////    top: ($(window).height() / 2),
                    ////    left: ($(window).width() / 2)
                    ////});

                    //$("#loadingContainer").fadeIn();

                    //alert('scroll bottom');
                    AddBottom_LiveFunc(true);

                //$("#contactsContainer").fadeIn(3000);
            }
            else if (wintop == 0) {
                //scrolled to the top
                AddTop_LiveFunc(true);
            }
        }); //end window.scroll
        }); //end document.ready

     </script>
     <!-- stylesheet adjustments -->
    <style type="text/css">
        .glyph
        {
            display: inline-block;
            text-align: center;
            padding: .75em;
            margin: .75em 1em .75em 1em;
            width: 38px;
        }

        .fs1
        {
            font-size: 2em;
        }

        .widget [class*="icos-"]
        {
            float: none;
        }

        /*#lastPostsLoader {
            width: 100%;
            background: url('path/to/opaque/img.png') repeat;
            background-color: yellow;
            top: 50%;
            left: 50%;
            opacity: 0.7;
            position: absolute;
            z-index: 10
        }*/

        #lastPostsLoader img.loading_circle {
            position: fixed;
            left: 0; /*the positioning you're looking for.*/
            width: 100%;
            bottom: 50px;
            left: 0;
            height: 6px;
        }
    </style>
    <!-- end stylesheet adjustments -->

</head>
<body>

    <!-- Top line begins -->
    <div id="top">
        <div class="topwrapper">
            <a href="contacts.html" title="" class="logo">
                <img src="images/logo.png" alt="" /></a>

            <!-- Right top nav -->
            <div class="topNav">
                <h2>
                    <span class="title" style="margin: 12px 30px 0px 0px">Contacts</span></h2>
                    <a href="contacts.html" class="synchButton tipS" original-title="Synch Button" id="A2"><span class="iconb" data-icon="&#xe161;"></span></a>
                <div class="clear"></div>
            </div>
        </div>
        <!-- Top line ends -->
    </div>
    <div class="modified_secNav" style="z-index: 0">
        <div class="secWrapper">

            <!-- Tabs container -->
            <div id="tab-container" class="tab-container">
                <div id="customDialog" title="Dialog with other custom elements" style="z-index: 999999">

                </div>

                <div id="contactsContainer">
                    <ul id="contactList" class="userList">
                    </ul>
                </div>
                <!-- #end general -->
            </div>
            <!--<div class="divider"><span></span></div>-->

        </div>
        <div class="clear"></div>
        <div>
        </div>
    </div>
    <div id="lastPostsLoader"></div>    
    <div id="bottom">
        <div>
            <ul class="middleFree">
                <li><a href="#" title="Contacts" class="transition"><span class="iconb selected" data-icon="&#xe1bb;"></span><span class="subtitle_text selected">Contacts</span></a></li>
                <li><a href="reminders.html" title="Reminders" class="transition"><span class="iconb" data-icon="&#xe023;"></span><span class="subtitle_text">Reminders</span></a></li>
                <li><a href="settings.html" title="Settings" class="transition"><span class="iconb" data-icon="&#xe04d;"></span><span class="subtitle_text">Settings</span></a></li>
                <li><a href="more.html" title="More" class="transition"><span class="iconb" data-icon="&#xe24a;"></span><span class="subtitle_text">More...</span></a></li>
            </ul>

        </div>
    </div>

</body>
</html>
